$(function () {
    var user = null;
    // 使用ajax从后台获得用户数据
    $.ajax({
        url: "usermsg.json",
        method: "get",
        success: function (res) {
            user = res;
        }
    });
    //渲染播放列表
    $.each(data, function (index, item) {
        var $li = $(`<li onclick = "play(${index})"> 第${index + 1}首  -  歌曲名：${item.song}&nbsp&nbsp&nbsp   歌手：&nbsp ${item.singer} </li>`);
        $(".wrap").append($li);
    });
    //渲染歌曲数目 
    $(".song-con-bd .num").html(data.length);
    //渲染第一首歌曲的相关信息
    $(".disc").attr("src", data[0].cover);
    $(".song-name").html(data[0].song);
    $(".singer").html(data[0].singer);
    $(".album:first").html(data[0].album);
    $("audio").attr("src", data[0].url);
    $("audio").attr("index", 0);
    $(".mode").attr("index",0);  
    $.each(lrcs[0].lyric, function (index, ele) {
        $(".lyrics").append($(`<li>${ele.lineLyric}</li>`));
    });
    // 为播放按钮、前一首和后一首按钮绑定点击事件
    //播放按钮
    $(".controls a:nth-child(2)").click(function () {
        $("audio").get(0).paused ? $("audio").get(0).play() : $("audio").get(0).pause();
        $("audio").get(0).paused ? $(this).removeClass("play") : $(this).addClass("play");
    });
    //播放上一首按钮
    $(".prev").click(function(){
        var index = parseInt($("audio").attr("index"));
        index = (index == 0) ? data.length-1 : index-1;
        play(index);
    });
    //播放下一首按钮
    $(".next").click(playnext);
    
    // 歌曲播放时唱片旋转
    $("audio").get(0).addEventListener('playing', function () {
        $(".disc").removeClass("playing-pause");
        $(".disc").addClass("playing");
        //歌曲播放时将时间长度给时间进度条
        $(".time input[type='range']").attr({
            max:this.duration,
            min:0
        });
        // 计算歌曲时间
        var time = parseInt(this.duration);
        var m = parseInt(time/60);
        var s = parseInt(time%60);
        s = (s<10) ? '0' + s : s;
        $(".end-m").html(m);
        $(".end-s").html(s);
    });
    // 歌曲暂停时唱片停止旋转
    $("audio").get(0).addEventListener('pause', function () {
        $(".disc").addClass("playing-pause");
    });
    // 歌曲结束后播放下一首
    $("audio").get(0).addEventListener('ended',playnext);
    // 歌曲时间控制
    $(".time input[type='range']").change(function(){
        $("audio").get(0).currentTime = $(this).val();
        $("audio").get(0).addEventListener('timeupdate',updateTime);
        // updateTime();
    });
    $("audio").get(0).addEventListener('timeupdate',updateTime);//更新时间进度条
    
    $(".time input[type='range']").get(0).addEventListener('input',function(){
        $("audio").get(0).removeEventListener('timeupdate',updateTime);
    });
    //音量按钮控制
    $(".volume input[type='range']").change(function(){
        $("audio").get(0).volume =  $(this).val();
    });
    //音量按钮
    $(".bell").click(function(){
        var moding = parseInt($(this).attr("index"));
        if(moding == 1) {
            $("audio").get(0).volume = 0;
            $(this).css("backgroundPosition","-1.33rem -0.74rem");            
        }else {
            $("audio").get(0).volume = $(".volume input[type='range']").val();
            $(this).css("backgroundPosition","-.05rem -2.51rem");//todo 修改一下音量按钮的背景图片
        }
        moding = (moding+1)%2;
        $(this).attr("index",moding);
    });
    // 点击显示和隐藏播放列表
    $(".song-lists").click(function () {
        $(".song-con").slideToggle();
    });
    //播放列表中歌曲被选中时样式改变
    $(".wrap li").click(function(){
        $(this).css("background","pink").siblings("li").css("background","none");
    });
    // 点击按钮切换播放模式
    $(".mode").click(function(){
        var index = parseInt($(this).attr("index"));
        index = (index == 2) ? 0 : index+1;
        $(this).attr("index",index);
        (index == 0) && $(this).css("backgroundPosition","-0.06rem -3.46rem");
        (index == 1) && $(this).css("backgroundPosition","-0.69rem -3.47rem");
        (index == 2) && $(this).css("backgroundPosition","-0.69rem -2.52rem");
    });
});
// 函数部分
// 1.按歌曲序号播放对应歌曲
function play(num) {
    $(".disc").attr("src", data[num].cover);//更换唱片
    $(".song-name").html(data[num].song);//更换歌曲名字
    $(".singer").html(data[num].singer);//更换歌手名字
    $(".album:first").html(data[num].album);//更换专辑名
    $("audio").attr("src", data[num].url);//切换至当前歌曲的音频
    $(".lyrics").empty();
    $.each(lrcs[num].lyric, function (index, ele) {
        $(".lyrics").append($(`<li>${ele.lineLyric}</li>`));//从数据中渲染当前歌曲的歌词
    });

    $(".disc").removeClass("playing");//唱片停止旋转 下一首音乐播放时从头再开始旋转
    $("audio").get(0).play();
    $(".time input[type='range']").attr({
        max:$("audio").attr("duration"),
        min:0
    });
    $("audio").attr("index",num);//更换当前播放的歌曲序号
    $(".controls a:nth-child(2)").addClass("play");//将播放按钮切换为暂停状态
}
// 2.播放下一首歌曲
function playnext(){
    var index = parseInt($("audio").attr("index"));
    var mode = parseInt($(".mode").attr("index"));
    if(mode == 0){
        index = (index == data.length-1) ? 0 : index+1;
    }else if(mode == 2){
        index = Math.floor(Math.random()*(data.length));
    }
    play(index);
}
// 3. 更新时间进度条
function updateTime(){
    //将当前播放时间给时间进度条
    var current_time = parseInt($("audio").get(0).currentTime);
    $(".time input[type='range']").val(current_time);
    //将当前播放时间转换为分和秒显示
    var m = parseInt(current_time/60);
    var s = parseInt(current_time%60);
    s = (s<10) ? '0' + s : s;
    $(".start-m").html(m);
    $(".start-s").html(s);
    //当前播放时间内的歌词高亮显示并且滚动
    var i = $("audio").attr("index");
    $.each(lrcs[i].lyric,function(index,ele){
        if(ele.time>current_time-0.5 && ele.time<current_time+0.5) {
            $(".lyrics li").eq(index).css({
                "color":"red"
            }).siblings("li").css({
                "color":"#000"
            });
            $(".lyrics").scrollTop(index*30);
            $(".desk_lyric_part").empty();
            var content = $(".lyrics li").eq(index).text();
            $(".desk_lyric_part").html(content);
            $(".desk_lyric_part").css({
                "color":"yellow",
                "background":"linear-gradient(to right,red,blue,green)",
                "transform":"scale(1.5)"
            });
            setTimeout(function(){
                $(".desk_lyric_part").css({
                    "transform":"scale(1)"
                });
            },1000);   
            return true;
        }
    });
}